<template>
	<view class="wrap">
		<view class="nav-wrap">
			<view class="nav" style="margin-bottom: 12rpx;">
				<u-icon name="arrow-left" color="#333333" size="24" @click="back"></u-icon>
				<view class="text">创建运单</view>
				<view class="add" v-if="type == 1" @click="show = true">删除</view>
				<view class="add" v-else></view>
			</view>
		</view>
		<view class="content">
			<view class="body">
				<u--form labelWidth="220rpx">
					<view class="list">
						<u-form-item label="所属项目" prop="name" required borderBottom @click="showProject = true">
							<u--input v-model="nameProject" placeholder="点击选择项目" fontSize="30rpx" suffixIcon="arrow-right"
								suffixIconStyle="color: #c0c4cc" disabled disabledColor="#fff">
							</u--input>
						</u-form-item>
						<u-form-item label="合同名称" prop="name" borderBottom @click="testContract">
							<u--input v-model="nameContract" placeholder="点击选择合同" fontSize="30rpx" suffixIcon="arrow-right"
								suffixIconStyle="color: #c0c4cc" disabled disabledColor="#fff">
							</u--input>
						</u-form-item>
						<view class="tips" @click="goAddress"><u-icon name="map" size="18" color="#003E81"></u-icon><text style="margin-left: 12rpx;">导入路线</text></view>
					</view>
					<view class="list" style="padding: 0;">
						<view class="header">
							<view class="unselected" v-if="!addressInfo" @click="goLineInfo">
								<view class="item">
									<view class="info">
										<view class="icon start">始</view>
										<view style="flex: 1;">委托人信息</view>
										<u-icon name="arrow-right" size="18" color="#c0c4cc"></u-icon>
									</view>
								</view>
								<view class="line"></view>
								<view class="item">
									<view class="info">
										<view class="icon end">收</view>
										<view style="flex: 1;">收货人信息</view>
										<u-icon name="arrow-right" size="18" color="#c0c4cc"></u-icon>
									</view>
								</view>
							</view>
							<view class="selected" v-else @click="goLineInfo">
								<view class="item">
									<view class="gray">托运人单位：{{addressInfo.fCompanyName}}</view>
									<view class="info">
										<view class="icon start">始</view>
										<view>{{addressInfo.fConsignee}}：{{addressInfo.fTel}}</view>
									</view>
									<view class="area">{{addressInfo.fCity}}{{addressInfo.fAddressDetail}}</view>
								</view>
								<view class="item">
									<view class="gray">收货人单位：{{addressInfo.tCompanyName}}</view>
									<view class="info">
										<view class="icon end">收</view>
										<view>{{addressInfo.tConsignee}}：{{addressInfo.tTel}}</view>
									</view>
									<view class="area">{{addressInfo.tCity}}{{addressInfo.tAddressDetail}}</view>
								</view>
							</view>
						</view>
					</view>
					<view class="list">
						<u-form-item label="业务类型" prop="name" required borderBottom @click="showActivity = true">
							<u--input v-model="nameActivity" placeholder="点击选择业务类型" fontSize="30rpx"
								suffixIcon="arrow-right" suffixIconStyle="color: #c0c4cc" disabled disabledColor="#fff">
							</u--input>
						</u-form-item>
						<u-form-item label="货物名称" prop="name" required borderBottom>
							<u-input v-model="nameGoods" placeholder="货物名称" fontSize="30rpx" />
						</u-form-item>
						<u-form-item label="货物类型" prop="name" required borderBottom @click="showGoodsType = true">
							<u--input v-model="nameGoodsType" placeholder="点击选择货物类型" fontSize="30rpx"
								suffixIcon="arrow-right" suffixIconStyle="color: #c0c4cc" disabled disabledColor="#fff">
							</u--input>
						</u-form-item>
						<u-form-item label="计划运输时间" prop="name" required borderBottom @click="showDate = true">
							<u--input v-model="valueDate" placeholder="点击选择时间" fontSize="30rpx" suffixIcon="arrow-right"
								suffixIconStyle="color: #c0c4cc" disabled disabledColor="#fff">
							</u--input>
						</u-form-item>
						<u-form-item label="运费结算方式" prop="name" required borderBottom @click="showWay = true">
							<u--input v-model="nameWay" placeholder="点击选择运费结算方式" fontSize="30rpx" suffixIcon="arrow-right"
								suffixIconStyle="color: #c0c4cc" disabled disabledColor="#fff">
							</u--input>
						</u-form-item>
						<u-form-item label="客户单号" prop="name">
							<u-input v-model="orderId" placeholder="单号" fontSize="30rpx" />
						</u-form-item>
					</view>
					<view class="list">
						<u-form-item label="承运商" prop="name" required borderBottom @click="showCarrier = true">
							<u--input v-model="nameCarrier" placeholder="点击选择承运商" fontSize="30rpx" suffixIcon="arrow-right"
								suffixIconStyle="color: #c0c4cc" disabled disabledColor="#fff">
							</u--input>
						</u-form-item>
						<!-- <view class="box"> -->
							<u-form-item label="运输数量" prop="name" required borderBottom>
								<u-input v-model="amount" type="digit" placeholder="数量" fontSize="30rpx" />
								<!-- <view class="unit">
									<text :class="active == item.dicValue ? 'active' : ''" v-for="(item, index) in unitList"
										:key="item.dicValue" @click="switchUnit(item.dicValue,'1')">{{item.dicName}}</text>
								</view>
								<view class="unit unit1" v-if="active == '3'">
									<text :class="active1 == item.dicValue ? 'active' : ''" v-for="(item, index) in unitList1"
										:key="item.dicValue" @click="switchUnit(item.dicValue, '2')">{{item.dicName1}}</text>
								</view> -->
							</u-form-item>
						<!-- </view> -->
						<!-- <view > -->
							<u-form-item label="数量单位" prop="name" required borderBottom class="box">
								<view class="unit">
									<text :class="active == item.dicValue ? 'active' : ''" v-for="(item, index) in unitList"
										:key="item.dicValue" @click="switchUnit(item.dicValue,'1')">{{item.dicName}}</text>
								</view>
								<!-- <view class="unit unit1" v-if="active == '3'">
									<text :class="active1 == item.dicValue ? 'active' : ''" v-for="(item, index) in unitList1"
										:key="item.dicValue" @click="switchUnit(item.dicValue, '2')">{{item.dicName1}}</text>
								</view> -->
							</u-form-item>
						<!-- </view> -->
						<!-- <view class="box"  > -->
							<u-form-item label="集装箱:" prop="name" borderBottom class="box" v-if="active == '3'">
								<!-- <view class="unit">
									<text :class="active == item.dicValue ? 'active' : ''" v-for="(item, index) in unitList"
										:key="item.dicValue" @click="switchUnit(item.dicValue,'1')">{{item.dicName}}</text>
								</view> -->
								<view class="unit unit1">
									<text :class="active1 == item.dicValue ? 'active' : ''" v-for="(item, index) in unitList1"
										:key="item.dicValue" @click="switchUnit(item.dicValue, '2')">{{item.dicName1}}</text>
								</view>
							</u-form-item>
						<!-- </view> -->
						<u-form-item label="运输单价" prop="name" required borderBottom>
							<u-input v-model="price" type="digit" placeholder="单价" fontSize="30rpx" />
						</u-form-item>
						<u-form-item class="select" label="货损指标" prop="name" @click="isShowDamage">
							<view class="select">
								<view v-if="cargoDamageListId">
									{{cargoDamageRate}}
								</view>
								<u-input  @input="inputDamage" v-if="!cargoDamageListId" v-model="cargoDamageRate" placeholder="货损指标" fontSize="30rpx"/>
								<view class="unit" v-if="!cargoDamageListId">
									‰
								</view>
								<view class="unit" v-if="cargoDamageRate || cargoDamageListId" @click.stop="clearDamage">
									<u-icon name="close-circle" color="#9c9c9c" size="18"></u-icon>
								</view>
							</view>
						</u-form-item>
						<!-- <view class="add">
							<u-icon name="file-text" size="20"></u-icon>
							<view style="margin-left: 12rpx;">添加承运商</view>
						</view> -->
					</view>
				</u--form>
			</view>
		</view>
		<view class="footer">
			<view class="btnBox">
				<view class="cache btn" @click="submit(1)">存草稿</view>
				<view class="submit btn" @click="submit(2)">提交</view>
			</view>
		</view>
		<!-- 货损指标 -->
		<u-popup :show="showDamageRate" @close="cancelDamage" :round="10">
			<view class="popup-wrap">
				<view class="title">货损指标</view>
				<view class="inputBox"  v-if="cargoDamageType != 1">
					<u-input v-model="damageRate" @input="inputDamage1" type="number" placeholder="填写货损指标" fontSize="30rpx"/>
					<text>‰</text>	
				</view>
				<view class="popup-list">
					<u-radio-group v-model="valueDamageCache" placement="column" iconPlacement="right"
						activeColor="#00468C" @change="changeDamage">
						<view class="item" v-for="(item, index) in dataList" :key="index">
							<view class="">
								{{item.schemeName }}
							</view>
							<u-radio :label="item.briefIntroduction" :name="item.cargoDamageListId"></u-radio>
						</view>
					</u-radio-group>
				</view>
				<view class="popup-btn">
					<view class="cancel btn" @click="cancelDamage">取消</view>
					<view class="confirm btn" @click="confirmDamageRate">确认</view>
				</view>
			</view>
		</u-popup>
		<!-- 弹出层 -->
		<u-popup :show="showProject" @close="cancelProject" :round="10">
			<view class="popup-wrap">
				<view class="title">选择项目</view>
				<u-search v-model="keyProject" shape="square" actionText="搜索" placeholder="搜索项目" :animation="true" @custom="searchProject" @search="searchProject">
				</u-search>
				<view class="popup-empty" v-if="!listProject.length">暂无数据～～～</view>
				<view class="popup-list" v-else>
					<u-radio-group v-model="valueProjectCache" placement="column" iconPlacement="right"
						activeColor="#00468C" @change="changeProject">
						<view class="item" v-for="(item, index) in listProject" :key="index">
							<u-radio :label="item.project_name" :name="item.project_id"></u-radio>
						</view>
					</u-radio-group>
				</view>
				<view class="popup-btn">
					<view class="cancel btn" @click="cancelProject">取消</view>
					<view class="confirm btn" @click="confirmProject">确认</view>
				</view>
			</view>
		</u-popup>
		<!-- 合同 -->
		<u-popup :show="showContract" @close="cancelContract" :round="10">
			<view class="popup-wrap">
				<view class="title">选择合同</view>
				<!-- <u-search v-model="keyContract" shape="square" actionText="搜索" :animation="true"
					@custom="searchContract"></u-search> -->
				<view class="popup-empty" v-if="!listContract.length">暂无数据～～～</view>
				<view class="popup-list">
					<u-radio-group v-model="valueContractCache" placement="column" iconPlacement="right"
						activeColor="#00468C" @change="changeContract">
						<view class="item" v-for="(item, index) in listContract" :key="index">
							<u-radio :label="item.cntName" :name="item.cntId"></u-radio>
						</view>
					</u-radio-group>
				</view>
				<view class="popup-btn">
					<view class="cancel btn" @click="cancelContract">取消</view>
					<view class="confirm btn" @click="confirmContract">确认</view>
				</view>
			</view>
		</u-popup>
		<!-- 业务类型 -->
		<u-popup :show="showActivity" @close="cancelActivity" :round="10">
			<view class="popup-wrap">
				<view class="title">选择业务类型</view>
				<!-- <u-search v-model="keyActivity" shape="square" actionText="搜索" :animation="true"
					@custom="searchActivity"></u-search> -->
				<view class="popup-empty" v-if="!listActivity">暂无数据～～～</view>
				<view class="popup-list">
					<u-radio-group v-model="valueActivityCache" placement="column" iconPlacement="right"
						activeColor="#00468C" @change="changeActivity">
						<view class="item" v-for="(item, index) in listActivity" :key="index">
							<u-radio :label="item.dicName" :name="item.dicValue"></u-radio>
						</view>
					</u-radio-group>
				</view>
				<view class="popup-btn">
					<view class="cancel btn" @click="cancelActivity">取消</view>
					<view class="confirm btn" @click="confirmActivity">确认</view>
				</view>
			</view>
		</u-popup>
		<!-- 货物类型 -->
		<u-popup :show="showGoodsType" @close="cancelGoodsType" :round="10">
			<view class="popup-wrap">
				<view class="title">选择货物类型</view>
				<!-- <u-search v-model="keyGoodsType" shape="square" actionText="搜索" :animation="true"
					@custom="searchGoodsType"></u-search> -->
				<view class="popup-empty" v-if="!listGoodsType">暂无数据～～～</view>
				<view class="popup-list">
					<u-radio-group v-model="valueGoodsTypeCache" placement="column" iconPlacement="right"
						activeColor="#00468C" @change="changeGoodsType">
						<view class="item" v-for="(item, index) in listGoodsType" :key="index">
							<u-radio :label="item.dicName" :name="item.dicValue"></u-radio>
						</view>
					</u-radio-group>
				</view>
				<view class="popup-btn">
					<view class="cancel btn" @click="cancelGoodsType">取消</view>
					<view class="confirm btn" @click="confirmGoodsType">确认</view>
				</view>
			</view>
		</u-popup>
		<!-- 承运商 -->
		<u-popup :show="showCarrier" @close="cancelCarrier" :round="10">
			<view class="popup-wrap">
				<view class="title">选择承运商</view>
				<!-- <u-search v-model="keyCarrier" shape="square" actionText="搜索" :animation="true" @custom="searchCarrier"> -->
				</u-search>
				<view class="popup-empty" v-if="!listCarrier.length">暂无数据～～～</view>
				<view class="popup-list">
					<u-radio-group v-model="valueCarrierCache" placement="column" iconPlacement="right"
						activeColor="#00468C" @change="changeCarrier">
						<view class="item" v-for="(item, index) in listCarrier" :key="index">
							<u-radio :label="item.etpName" :name="item.etpId"></u-radio>
						</view>
					</u-radio-group>
				</view>
				<view class="popup-btn">
					<view class="cancel btn" @click="cancelCarrier">取消</view>
					<view class="confirm btn" @click="confirmCarrier">确认</view>
				</view>
			</view>
		</u-popup>
		<!-- 日期 -->
		<u-calendar :show="showDate" mode="range" @confirm="confirmDate" closeOnClickOverlay @close="showDate = false">
		</u-calendar>
		
		<!-- 运费结算方式 -->
		<u-popup :show="showWay" @close="cancelWay" :round="10">
			<view class="popup-wrap">
				<view class="title">运费结算方式</view>
				<view class="popup-empty" v-if="!listWay">暂无数据～～～</view>
				<view class="popup-list">
					<u-radio-group v-model="valueWayCache" placement="column" iconPlacement="right"
						activeColor="#00468C" @change="changeWay">
						<view class="item" v-for="(item, index) in listWay" :key="index">
							<u-radio :label="item.name" :name="item.value"></u-radio>
						</view>
					</u-radio-group>
				</view>
				<view class="popup-btn">
					<view class="cancel btn" @click="cancelWay">取消</view>
					<view class="confirm btn" @click="confirmWay">确认</view>
				</view>
			</view>
		</u-popup>
		<!-- 历史线路 -->
		<u-popup :show="showLine" @close="cancelLine" :round="10">
			<view class="popup-wrap">
				<view class="line-title">
					<view class="cancel-btn" @click="cancelLine">取消</view>
					<view class="text">历史记录</view>
					<view class="add-btn" @click="goNewLine">新建</view>
				</view>
				<view class="popup-line">
					<view class="line-item" v-for="(item, index) in lineList">
						<view class="line-info" @click="selectLine(item)">
							<view class="item">
								<view class="gray">托运人单位：{{item.shippingUserUnit}}</view>
								<view class="info">
									<view class="icon start">始</view>
									<view>{{item.shippingUserName}}：{{item.shippingUserTel}}</view>
								</view>
								<view class="area">{{item.shippingCity}}{{item.shippingAddress}}</view>
							</view>
							<view class="item">
								<view class="gray">收货人单位：{{item.receiptUserUnit}}</view>
								<view class="info">
									<view class="icon end">收</view>
									<view>{{item.receiptUserName}}：{{item.receiptUserTel}}</view>
								</view>
								<view class="area">{{item.receiptCity}}{{item.receiptAddress}}</view>
							</view>
						</view>
						<view class="line-edit" @click="editLine(item)">编辑</view>
					</view>
				</view>
				<view class="popup-btn" style="justify-content: center;" v-if="addressInfo">
					<view style="width: 90%;" class="confirm btn" @click="onEditLine">修改线路</view>
				</view>
			</view>
		</u-popup>
		<u-modal content="确定要删除该草稿吗？" :show="show" showCancelButton closeOnClickOverlay @confirm="onDelete"
			@cancel="show = false" @close="show = false"></u-modal>
	</view>
</template>

<script>
	import {type} from '@/utils/type.js'
	import {
		getAllReject,
		queryDicKey,
		queryCntByProject,
		queryCntPluByCntId,
		carrierList,
		saveDraft,
		savePublish,
		queryCurrSignPlatformCo,
		getDraft,
		deleteDraft,
		editDraft,
		publishWaybill,
		getShipperReceiver,
		cargoDamagePage
	} from '@/config/api/app.js'
	import {
		formatDate
	} from '@/utils/tools'
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				addressInfo: null,
				lineList: [],	// 历史地址
				showLine: false,

				nameGoods: '', //	货物名称
				orderId: '', //	客户单号	
				price: '', //	单价
				amount: '', //	数量
				unitList: [], //	单位列表
				unitList1: [], //	集装箱单位列表
				active: 1,
				active1: '',
				damageIndex: '',
				// 项目
				showProject: false,
				listProject: [],
				nameProject: '',
				valueProject: '',
				valueProjectCache: '', //	项目选择缓存
				keyProject: '',
				// 合同
				showContract: false,
				listContract: [],
				nameContract: '',
				valueContractCache: '', //	项目合同缓存
				valueContract: '',
				// 业务类型
				showActivity: false,
				listActivity: null,
				nameActivity: '',
				valueActivity: '',
				valueActivityCache: '', //	业务类型选择缓存
				// 货物类型
				showGoodsType: false,
				listGoodsType: null,
				nameGoodsType: '',
				valueGoodsType: '',
				valueGoodsTypeCache: '', //	货物类型选择缓存
				// 承运商
				showCarrier: false,
				listCarrier: [],
				valueCarrier: '',
				nameCarrier: '',
				valueCarrierCache: '', //	承运商选择缓存
				//货损
				isCargoDamage: '',//是否使用货损方案：0否 ，1是
				cargoDamageRate:'',//手填货损
				cargoDamageListId: '',//选择货损
				dataList:[],
				showDamageRate: false, //显示
				cargoDamageType: '',//  货损类型 1.吨位计算 2.货损率计算
				valueDamageCache:'',
				
				damageRate:'',
				showDate: false,
				valueDate: '',
				valueDateArray: [],
				
				showWay: false,
				listWay: [{name: '实卸模式', value: '1'},{name: '实装模式', value: '2'},{name: '实装实卸取最小值', value: '3'}],
				valueWay: '',
				nameWay: '',
				valueWayCache: '',
				
				platformCoId: '',
				platformCoName: '',
				platformCoNo: '',
				rate: '',


				waybillId: '',
				type: 0, // 0是新建， 1是编辑
				show: false
			}
		},
		onLoad(options) {
			if (options.id) {
				this.waybillId = options.id
				this.type = 1
				setTimeout(() => {
					this.getDraftInfo()
				}, 300)
			}
		},
		created() {
			this.getProject(0)
			this.getCarrierList()
			this.getQueryDicKey()
			this.getPlatformCo()
		},
		onShow() {
			this.addressInfo = this.selectAddress
			console.log(this.addressInfo)
		},
		beforeDestroy() {
			this.SELECTADDRESS(null)
		},
		computed: {
			...mapGetters(['selectAddress'])
		},
		methods: {
			onScroll(e){
				console.log(e)
			},
			goNewLine(){
				uni.navigateTo({
					url: `./append?type=1`
				})
				this.showLine = false
			},
			goLineInfo() {
				if (!this.valueProject) {
					uni.$u.toast('请先选择项目哟～')
					return
				}
				getShipperReceiver().then((res) => {
					if (res.code == 0) {
						if(res.data.length){
							this.lineList = res.data
							this.showLine = true
						}else{
							uni.navigateTo({
								url: `./append?type=1`
							})
						}
					} else {
						uni.$u.toast(res.msg);
					}
				}).catch(err => {
					console.log(err)
				})
			},
			selectLine(item) {
				let addressObj = {}
				addressObj.fAddressDetail = item.shippingAddress
				addressObj.fCity = item.shippingCity
				addressObj.fCityValue = item.scounty
				addressObj.fCompanyName = item.shippingUserUnit
				addressObj.fConsignee = item.shippingUserName
				// addressObj.fCounty = item.shippingCity
				// addressObj.fProvince = res.data.shipperProvince
				addressObj.fTel = item.shippingUserTel
				// addressObj.lineInfoId = res.data.addressId
				addressObj.tAddressDetail = item.receiptAddress
				addressObj.tCity = item.receiptCity
				addressObj.tCityValue = item.rcounty
				addressObj.tCompanyName = item.receiptUserUnit
				addressObj.tConsignee = item.receiptUserName
				// addressObj.tCounty = res.data.receiverCounty
				// addressObj.tProvince = res.data.receiverProvince
				addressObj.tTel = item.receiptUserTel
				addressObj.shippingLng = item.shippingLng
				addressObj.shippingLat = item.shippingLat
				addressObj.receiptLng = item.receiptLng
				addressObj.receiptLat = item.receiptLat
				if(!addressObj.shippingLng && !addressObj.shippingLat){
					uni.request({
						url: 'https://restapi.amap.com/v3/geocode/geo?parameters',
						method: 'GET',
						data: {
							key: type.mapKey,
							address: `${addressObj.fCity}${addressObj.fAddressDetail}`
						},
						success: res => {
							let latitude = res.data.geocodes[0].location.split(',')[1]
							let longitude = res.data.geocodes[0].location.split(',')[0]
							addressObj.shippingLng = longitude
							addressObj.shippingLat = latitude
						}
					})
				}
				if(!addressObj.receiptLng && !addressObj.receiptLat){
					uni.request({
						url: 'https://restapi.amap.com/v3/geocode/geo?parameters',
						method: 'GET',
						data: {
							key: type.mapKey,
							address: `${addressObj.tCity}${addressObj.tAddressDetail}`
						},
						success: res => {
							let latitude = res.data.geocodes[0].location.split(',')[1]
							let longitude = res.data.geocodes[0].location.split(',')[0]
							addressObj.receiptLng = longitude
							addressObj.receiptLat = latitude
						}
					})
				}
				setTimeout(() => {
					this.SELECTADDRESS(addressObj)
					this.addressInfo = addressObj
					this.showLine = false
				}, 500)
			},
			editLine(item) {
				let info = JSON.stringify(item)
				uni.navigateTo({
					url: `./append?type=1&&info=${info}`
				})
				this.showLine = false
			},
			onEditLine(){
				let obj = {
					rcity: '',
					rcounty: this.addressInfo.tCityValue,
					receiptAddress: this.addressInfo.tAddressDetail,
					receiptCity: this.addressInfo.tCity,
					receiptUserName: this.addressInfo.tConsignee,
					receiptUserTel: this.addressInfo.tTel,
					receiptUserUnit: this.addressInfo.tCompanyName,
					rprovince: '',
					scity: '',
					scounty: this.addressInfo.fCityValue,
					shippingAddress: this.addressInfo.fAddressDetail,
					shippingCity: this.addressInfo.fCity,
					shippingUserName: this.addressInfo.fConsignee,
					shippingUserTel: this.addressInfo.fTel,
					shippingUserUnit: this.addressInfo.fCompanyName,
					sprovince: ''
				}
				let info = JSON.stringify(obj)
				uni.navigateTo({
					url: `./append?type=1&&info=${info}`
				})
				this.showLine = false
			},
			cancelLine() {
				this.showLine = false
			},
			onDelete() {
				let data = {
					params: {
						id: this.waybillId
					},
					custom: {}
				}
				deleteDraft(data).then((res) => {
					if (res.code == 0) {
						this.show = false
						uni.$u.toast('删除成功')
						this.SELECTADDRESS(null)
						this.type = 0
						this.addressInfo = null
						this.nameGoods = ''
						this.orderId = ''
						this.price = ''
						this.amount = ''
						this.active = 1
						this.damageIndex = ''
						
						this.nameProject = ''
						this.valueProject = ''
						this.valueProjectCache = ''
						
						this.nameContract = ''
						this.valueContractCache = ''
						this.valueContract = ''
						
						// 业务类型
						this.nameActivity = ''
						this.valueActivity = ''
						this.valueActivityCache = ''
						// 货物类型
						this.nameGoodsType = '',
						this.valueGoodsType = '',
						this.valueGoodsTypeCache = ''
						// 运费结算方式
						this.valueWay = '',
						this.nameWay = '',
						this.valueWayCache = '',
						// 承运商
						this.valueCarrier = '',
						this.nameCarrier = '',
						this.valueCarrierCache = ''
						
						this.valueDate = '',
						this.valueDateArray = []
						setTimeout(() => {
							uni.navigateBack()
						}, 500)
					} else {
						uni.$u.toast(res.msg);
					}
				}).catch(err => {
					console.log(err)
				})
			},
			//	获取草稿信息
			getDraftInfo() {
				let data = {
					params: {
						id: this.waybillId
					},
					custom: {}
				}
				getDraft(data).then((res) => {
					if (res.code == 0) {
						console.log(res.data)
						let addressObj = {}
						addressObj.fAddressDetail = res.data.shippingAddress
						addressObj.fCity = res.data.shippingCity
						addressObj.fCityValue = res.data.shippingCode
						addressObj.fCompanyName = res.data.shippingUserUnit
						addressObj.fConsignee = res.data.shippingUserName
						addressObj.fCounty = res.data.shippingCity
						// addressObj.fProvince = res.data.shipperProvince
						addressObj.fTel = res.data.shippingUserTel
						// addressObj.lineInfoId = res.data.addressId
						addressObj.tAddressDetail = res.data.receiptAddress
						addressObj.tCity = res.data.receiptCity
						addressObj.tCityValue = res.data.receiptCode
						addressObj.tCompanyName = res.data.receiptUserUnit
						addressObj.tConsignee = res.data.receiptUserName
						// addressObj.tCounty = res.data.receiverCounty
						// addressObj.tProvince = res.data.receiverProvince
						addressObj.tTel = res.data.receiptUserTel
						
						addressObj.shippingLng = res.data.shippingLng
						addressObj.shippingLat = res.data.shippingLat
						addressObj.receiptLng = res.data.receiptLng
						addressObj.receiptLat = res.data.receiptLat
						
						if(!addressObj.shippingLng && !addressObj.shippingLat){
							uni.request({
								url: 'https://restapi.amap.com/v3/geocode/geo?parameters',
								method: 'GET',
								data: {
									key: type.mapKey,
									address: `${addressObj.fCity}${addressObj.fAddressDetail}`
								},
								success: res => {
									let latitude = res.data.geocodes[0].location.split(',')[1]
									let longitude = res.data.geocodes[0].location.split(',')[0]
									addressObj.shippingLng = longitude
									addressObj.shippingLat = latitude
								}
							})
						}
						if(!addressObj.receiptLng && !addressObj.receiptLat){
							uni.request({
								url: 'https://restapi.amap.com/v3/geocode/geo?parameters',
								method: 'GET',
								data: {
									key: type.mapKey,
									address: `${addressObj.tCity}${addressObj.tAddressDetail}`
								},
								success: res => {
									let latitude = res.data.geocodes[0].location.split(',')[1]
									let longitude = res.data.geocodes[0].location.split(',')[0]
									addressObj.receiptLng = longitude
									addressObj.receiptLat = latitude
								}
							})
						}
						setTimeout(() => {
							this.SELECTADDRESS(addressObj)
							this.addressInfo = addressObj
						}, 500)
						this.nameGoods = res.data.goodsName
						this.damageIndex = res.data.damageRate
						if( Number(res.data.unit) > 6 ){
							this.active = '3'
							this.active1 = res.data.unit
						}else{
							this.active = res.data.unit
						}
						
						this.price = res.data.waybillCarrierList[0].shippingPrice
						this.amount = res.data.waybillCarrierList[0].shippingNum
						this.orderId = res.data.custNo
						
						this.platformCoId = res.data.platformCoId,
						this.platformCoName = res.data.platformCoName,
						this.platformCoNo = res.data.platformCoNo,
						this.rate = res.data.rate,
						//	项目
						this.valueProject = res.data.itemId
						this.nameProject = res.data.itemName
						this.valueProjectCache = res.data.itemId
						
						//	合同
						this.valueContract = res.data.cntId
						this.valueContractCache = res.data.cntId
						if(this.valueProject){
							queryCntByProject({
								params: {
									projectId: this.valueProject
								}
							}).then((res) => {
								console.log(res)
								if (res.code == 0) {
									this.listContract = res.data
									let contract = this.listContract.find(item => {
										return item.cntId === this.valueContract
									})
									this.nameContract = contract.cntName
								} else {
									uni.$u.toast(res.msg);
								}
							}).catch(err => {
								console.log(err)
							})
						}
						//	业务
						this.valueActivity = res.data.bizType
						this.valueActivityCache = res.data.bizType
						// 货物类型
						this.valueGoodsType = res.data.goodsType
						this.valueGoodsTypeCache = res.data.goodsType
						// 运费结算方式
						this.valueWay = res.data.settlementModes
						this.valueWayCache = res.data.settlementModes
						console.log(this.valueWay)
						console.log(this.valueWayCache)
						this.$nextTick(() => {
							let goods = Object.values(this.listGoodsType).find(item => {
								return item.dicValue === this.valueGoodsType
							})
							goods ? this.nameGoodsType = goods.dicName : this.nameGoodsType = ''
							let activity = Object.values(this.listActivity).find(item => {
								return item.dicValue === this.valueActivity
							})
							activity ? this.nameActivity = activity.dicName : this.nameActivity = ''
							let way = this.listWay.find(item => {
								return item.value == this.valueWay
							})
							way ? this.nameWay = way.name : this.nameWay = ''
							// 承运商
							this.valueCarrier = res.data.waybillCarrierList[0].carrierId
							this.nameCarrier = res.data.waybillCarrierList[0].carrierName
							this.valueCarrierCache = res.data.waybillCarrierList[0].carrierId
						})
						
						if(res.data.planBeginTime && res.data.planEndTime){
							this.valueDate = formatDate(res.data.planBeginTime) + '-' + formatDate(res.data.planEndTime)
							this.valueDateArray = [formatDate(res.data.planBeginTime), formatDate(res.data.planEndTime)]
						}else{
							this.valueDate = ''
							this.valueDateArray = []
						}
						
					} else {
						uni.$u.toast(res.msg);
					}
				}).catch(err => {
					console.log(err)
				})
			},
			
			submit(type) {
				console.log(this.cargoDamageListId,11111111111111)
				if (!this.addressInfo) {
					uni.$u.toast('请先选择线路～')
					return
				}
				let obj = {
					waybill: {
						itemId: this.valueProject, //	项目id
						planBeginTime: this.valueDateArray[0] ? this.valueDateArray[0] + ' 00:00:00' : this
							.valueDateArray[0],
						planEndTime: this.valueDateArray[this.valueDateArray.length - 1] ? this.valueDateArray[this
							.valueDateArray.length - 1] + ' 00:00:00' : this.valueDateArray[this.valueDateArray
							.length - 1],
						bizType: this.valueActivity, //	业务类型
						shippingUserUnit: this.addressInfo.fCompanyName,
						shippingUserName: this.addressInfo.fConsignee,
						shippingUserTel: this.addressInfo.fTel,
						shippingCode: this.addressInfo.fCityValue,
						shippingAddress: this.addressInfo.fAddressDetail,
						receiptUserUnit: this.addressInfo.tCompanyName,
						receiptUserName: this.addressInfo.tConsignee,
						receiptUserTel: this.addressInfo.tTel,
						receiptCode: this.addressInfo.tCityValue,
						receiptAddress: this.addressInfo.tAddressDetail,
						goodsName: this.nameGoods,
						goodsType: this.valueGoodsType,
						// unit: this.active,
						damageRate: this.damageIndex,
						planShippingNum: this.amount,
						platformCoId: this.platformCoId,
						platformCoNo: this.platformCoNo,
						platformCoName: this.platformCoName,
						rate: this.rate, //	费率
						cntId: this.valueContract,
						custNo: this.orderId,
						itemName: this.nameProject,
						shippingCity: this.addressInfo.fCity,
						receiptCity: this.addressInfo.tCity,
						settlementModes: this.valueWay,
						shippingLng: this.addressInfo.shippingLng,
						shippingLat: this.addressInfo.shippingLat,
						receiptLng: this.addressInfo.receiptLng,
						receiptLat: this.addressInfo.receiptLat,
						
					},
					
					waybillCarrierList: [{
						carrierId: this.valueCarrier,
						carrierName: this.nameCarrier,
						shippingPrice: this.price,
						shippingNum: this.amount,
						shippingTotal: (this.price * this.amount).toFixed(2)
					}]
				}
				if(this.active1 && this.active == '3'){
					obj.waybill.unit = this.active1
				}else{
					obj.waybill.unit = this.active
				}
				if(this.cargoDamageListId){
					obj.waybill.cargoDamageListId = this.cargoDamageListId
				}else{
					obj.waybill.damageRate = this.cargoDamageRate
				}
				console.log(obj)
				if (this.type === 1){
					obj.waybill.waybillId = this.waybillId
					
					type === 1 ? uni.$u.debounce(this.postEditDraft(obj), 3000) : uni.$u.debounce(this.publishWaybill(obj),3000)
				} else {
					type === 1 ? uni.$u.debounce(this.postSaveDraft(obj), 3000) : uni.$u.debounce(this.postSavePublish(obj),
						3000)
				}
			},
			publishWaybill(obj) {
				editDraft(obj, {
					custom: {}
				}).then((res) => {
					if (res.code == 0) {
						console.log(res)
						this.postPublishWaybill()
					} else {
						uni.$u.toast(res.msg);
					}
				}).catch(err => {
					console.log(err)
				})
			},
			postPublishWaybill() {
				
				publishWaybill({
					params: {
						id: this.waybillId
					},
					custom: {
						title: '提交中……'
					}
				}).then((res) => {
					if (res.code == 0) {
						uni.$u.toast('发布成功');
						setTimeout(() => {
							uni.navigateBack()
						}, 500)
					} else {
						uni.$u.toast(res.msg);
					}
				}).catch(err => {
					console.log(err)
				})
			},
			postEditDraft(obj) {
				editDraft(obj, {
					custom: {
						title: '提交中……'
					}
				}).then((res) => {
					if (res.code == 0) {
						console.log(res)
						uni.$u.toast('保存成功');
						setTimeout(() => {
							uni.navigateBack()
						}, 500)
					} else {
						uni.$u.toast(res.msg);
					}
				}).catch(err => {
					console.log(err)
				})
			},
			postSaveDraft(obj) {
				saveDraft(obj, {
					custom: {
						title: '提交中……'
					}
				}).then((res) => {
					if (res.code == 0) {
						console.log(res)
						uni.$u.toast('保存成功');
						setTimeout(() => {
							uni.navigateBack()
						}, 500)
					} else {
						uni.$u.toast(res.msg);
					}
				}).catch(err => {
					console.log(err)
				})
			},
			postSavePublish(obj) {
				if (!obj.waybill.itemId) {
					uni.$u.toast('请先选择项目～')
					return
				}
				if (!obj.waybill.bizType) {
					uni.$u.toast('请先选择业务类型～')
					return
				}
				if (!obj.waybill.goodsName) {
					uni.$u.toast('请先填写货物名称～')
					return
				}
				if (!obj.waybill.goodsType) {
					uni.$u.toast('请先选择货物类型～')
					return
				}
				if (!obj.waybill.planBeginTime) {
					uni.$u.toast('请先选择运输时间～')
					return
				}
				if (!obj.waybill.planEndTime) {
					uni.$u.toast('请先选择运输时间～')
					return
				}
				if (!obj.waybill.settlementModes) {
					uni.$u.toast('请先选择运费结算方式～')
					return
				}
				if (!obj.waybillCarrierList[0].carrierId) {
					uni.$u.toast('请先选择承运商～')
					return
				}
				if (!obj.waybillCarrierList[0].shippingNum) {
					uni.$u.toast('请先输入运输数量～')
					return
				}
				if (!obj.waybillCarrierList[0].shippingPrice) {
					uni.$u.toast('请先输入运输单价～')
					return
				}
				console.log(obj)
				savePublish(obj, {
					custom: {
						title: '提交中……'
					}
				}).then((res) => {
					console.log(res)
					if (res.code == 0) {
						uni.$u.toast('创建成功');
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/home/home'
							})
						}, 500)
					} else {
						uni.$u.toast(res.msg)
					}
				}).catch(err => {
					console.log(err)
				})
			},
			//查询当前签约网络承运商
			getPlatformCo() {
				queryCurrSignPlatformCo().then((res) => {
					if (res.code == 0) {
						console.log(res)
						this.platformCoId = res.data.platformCoId
						this.platformCoName = res.data.platformCoName
						this.platformCoNo = res.data.platformCoNo
						this.rate = res.data.rate
					} else {
						uni.$u.toast(res.msg);
					}
				}).catch(err => {
					console.log(err)
				})
			},
			//	获取承运商
			getCarrierList() {
				let data = {
					custom: {
						title: '获取承运商……'
					}
				}
				carrierList(data).then((res) => {
					if (res.code == 0) {
						this.listCarrier = res.data
						this.valueCarrier = this.listCarrier[0].etpId
						this.valueCarrierCache = this.listCarrier[0].etpId
						this.nameCarrier = this.listCarrier[0].etpName
					} else {
						uni.$u.toast(res.msg);
					}
				}).catch(err => {
					console.log(err)
				})
			},
			//	查询字段数据
			getQueryDicKey() {
				let arr = [
					"BIZ_TYPE",
					"CARGO_TYPE",
					"PRC_MODE",
					"WAYBILL_MODE",
					"WAYBILL_STATUS",
					"UNIT"
				]
				queryDicKey(arr, {
					custom: {
						title: '查询字段数据……'
					}
				}).then(res => {
					if (res.code == 0) {
						console.log(res.data)
						this.listActivity = res.data.BIZ_TYPE
						this.listGoodsType = res.data.CARGO_TYPE
						
						let arr= Object.values(res.data.UNIT)
						arr.forEach((item,index) => {
						    if(index < 6){
								this.unitList .push(item)
						    }else{
								item.dicName1 = this.getName(item.dicName)
								this.unitList1.push(item)
						    }
						})
						console.log(this.unitList1)
					} else {
						uni.$u.toast(res.msg);
					}
				}).catch(err => {
					console.log(err)
				})
			},
			getName(str){
				// 方法一：使用正则表达式匹配并截取括号中的值
				const result1 = str.match(/（([^）]+)）/);
				const value1 = result1[1];
				return value1
			},
			//	获取项目列表
			getProject(type) {
				let data = {
					params: {
						projectName: this.keyProject
					},
					custom: {}
				}
				if (type === 0) {
					data.custom.title = '获取项目……'
				}
				getAllReject(data).then((res) => {
					if (res.code == 0) {
						this.listProject = res.data.project
					} else {
						uni.$u.toast(res.msg);
					}
				}).catch(err => {
					console.log(err)
				})
			},
			//货损方案
			getCargoDamage(type){
				if(this.isCargoDamage == 0){
					return false
				}
				let data = {
					"schemeName":"",
					"pageNum":1,
					"pageSize":100,
					"type":type,
				}
				cargoDamagePage(data).then((res) => {
					if (res.code == 0) {
						this.dataList = res.data.list
					} else {
						uni.$u.toast(res.msg);
					}
				}).catch(err => {
				})
			},
			// 项目
			changeProject(e) {
				this.valueProjectCache = e
				
				console.log(e)
				
			},
			searchProject(e) {
				this.keyProject = uni.$u.trim(e)
				this.getProject(1)
			},
			cancelProject() {
				if (this.keyProject) {
					this.keyProject = ''
					this.getProject(1)
				}
				this.showProject = false
				this.valueProjectCache = this.valueProject
			},
			confirmProject() {
				this.keyProject = ''
				this.showProject = false
				
				if (this.valueProjectCache == this.valueProject) return
				this.valueProject = this.valueProjectCache
				let obj = this.listProject.find(item => {
					return item.project_id === this.valueProject
				})
				this.nameProject = obj.project_name
				console.log(obj)
				if (!this.valueContract) {
					this.SELECTADDRESS(null)
					this.addressInfo = null
				} else {
					this.valueContractCache = ''
				}
				this.cargoDamageType = obj.cargoDamageType
				this.isCargoDamage = obj.isCargoDamage
				if(this.cargoDamageType == 1){
					this.active = 1
				}
				this.damageRate = ''
				this.cargoDamageRate = ''
				this.cargoDamageListId = ''
				this.valueDamageCache = ''
				//cargoDamageType  1.吨位计算 只能选择 2.货损率计算 可选择可填写
				
			},
			inputDamage(e){
				let that = this
				
				this.$nextTick(() => {
					if(this.cargoDamageRate >= 999.99){
						this.cargoDamageRate = 999.99
						console.log('进入了么’')
					}else{
						this.cargoDamageRate = (this.cargoDamageRate.match(/^\d*(\.?\d{0,2})/g)[0]) || null
					}
					return false
				})
			},
			inputDamage1(){
				let that = this
				  this.$nextTick(() => {
					  if(this.damageRate > 999.99){
							this.damageRate = 999.99
							return false
					  }else{
						  this.damageRate = (this.damageRate.match(/^\d*(\.?\d{0,2})/g)[0]) || null
					  }
				  })
			},
			changeDamage(e) {
				this.valueDamageCache = e
				console.log(e)
			},
			//取消货损指标的框
			cancelDamage(){
				this.dataList = []
				this.damageRate = ''
				this.valueDamageCache = ''
				this.showDamageRate = false
			},
			// 清除货损
			clearDamage(){
				this.damageRate = ''
				this.cargoDamageRate = ''
				this.cargoDamageListId = ''
				this.valueDamageCache = ''
			},
			//确定货损指标的框
			confirmDamageRate(){
				this.showDamageRate = false
				if(!this.damageRate){
					let obj = this.dataList.find(item => {
						return item.cargoDamageListId === this.valueDamageCache
					})
					this.cargoDamageListId = obj.cargoDamageListId
					this.cargoDamageRate = obj.briefIntroduction
				}else{
					this.cargoDamageListId = ''
					this.cargoDamageRate = this.damageRate
				}
			},
			// 合同
			testContract() {
				if (!this.valueProject) {
					uni.$u.toast('请先选择项目哟～')
				} else {
					queryCntByProject({
						params: {
							projectId: this.valueProject
						}
					}).then((res) => {
						if (res.code == 0) {
							this.listContract = res.data
							this.showContract = true
						} else {
							uni.$u.toast(res.msg);
						}
					}).catch(err => {
						console.log(err)
					})
				}
			},
			changeContract(e) {
				this.valueContractCache = e
			},
			cancelContract() {
				this.showContract = false
				this.valueContractCache = this.valueContract
			},
			confirmContract() {
				this.showContract = false
				this.valueContract = this.valueContractCache
				if (!this.valueContract) return
				let addressObj = {}
				queryCntPluByCntId({
					params: {
						cntId: this.valueContract
					}
				}).then((res) => {
					if (res.code == 0) {
						console.log(res)
						let obj = res.data
						addressObj.fAddressDetail = obj.cntAddressList[0].shipperAddress
						addressObj.fCity = obj.cntAddressList[0].shipperCity
						addressObj.fCompanyName = obj.cntAddressList[0].shipperName
						addressObj.fConsignee = obj.cntAddressList[0].shipperLinkName
						addressObj.fCounty = obj.cntAddressList[0].shipperCounty
						addressObj.fProvince = obj.cntAddressList[0].shipperProvince
						addressObj.fTel = obj.cntAddressList[0].shipperTel
						addressObj.lineInfoId = obj.cntAddressList[0].addressId
						addressObj.tAddressDetail = obj.cntAddressList[0].receiverAddress
						addressObj.tCity = obj.cntAddressList[0].receiverCity
						addressObj.tCompanyName = obj.cntAddressList[0].receiverName
						addressObj.tConsignee = obj.cntAddressList[0].receiverLinkName
						addressObj.tCounty = obj.cntAddressList[0].receiverCounty
						addressObj.tProvince = obj.cntAddressList[0].receiverProvince
						addressObj.tTel = obj.cntAddressList[0].receiverTel
						
						this.addressInfo = addressObj
						this.nameContract = obj.cntName
						
						this.nameGoods = obj.cntPluList[0].pluName
						this.active = obj.cntPluList[0].unit
						this.price = obj.cntPluList[0].price
						this.valueGoodsType = obj.cntPluList[0].pluType
						this.valueActivityCache = obj.cntPluList[0].pluType
						this.damageIndex = obj.cntPluList[0].damageIndex
						
						let goods = Object.values(this.listGoodsType).find(item => {
							return item.dicValue === this.valueGoodsType
						})
						this.nameGoodsType = goods.dicName
					} else {
						uni.$u.toast(res.msg);
					}
				}).catch(err => {
					console.log(err)
				})
				// let obj = this.listContract.find(item => {
				// 	return item.cntId === this.valueContract
				// })
				// console.log(obj)
				// console.log(this.listContract)
				// console.log(this.valueContract)
			},
			// 业务类型
			changeActivity(e) {
				this.valueActivityCache = e
			},
			cancelActivity() {
				this.showActivity = false
				this.valueActivityCache = this.valueActivity
			},
			confirmActivity() {
				this.showActivity = false
				this.valueActivity = this.valueActivityCache
				if (!this.valueActivity) return
				let obj = Object.values(this.listActivity).find(item => {
					return item.dicValue === this.valueActivity
				})
				this.nameActivity = obj.dicName
			},
			// 货物类型
			changeGoodsType(e) {
				this.valueGoodsTypeCache = e
			},
			cancelGoodsType() {
				this.showGoodsType = false
				this.valueGoodsTypeCache = this.valueGoodsType
			},
			confirmGoodsType() {
				this.showGoodsType = false
				this.valueGoodsType = this.valueGoodsTypeCache
				if (!this.valueGoodsType) return
				let obj = Object.values(this.listGoodsType).find(item => {
					return item.dicValue === this.valueGoodsType
				})
				this.nameGoodsType = obj.dicName
			},
			// 承运商
			changeCarrier(e) {
				this.valueCarrierCache = e
			},
			cancelCarrier() {
				this.showCarrier = false
				this.valueCarrierCache = this.valueCarrier
			},
			confirmCarrier() {
				this.showCarrier = false
				this.valueCarrier = this.valueCarrierCache
				if (!this.valueCarrier) return
				let obj = this.listCarrier.find(item => {
					return item.etpId == this.valueCarrier
				})
			
				this.nameCarrier = obj.etpName
			},
			// 运费结算方式
			changeWay(e) {
				this.valueWayCache = e
			},
			cancelWay() {
				this.showWay = false
				this.valueWayCache = this.valueWay
			},
			confirmWay() {
				this.showWay = false
				this.valueWay = this.valueWayCache
				if (!this.valueWay) return
				let obj = this.listWay.find(item => {
					return item.value == this.valueWay
				})
				this.nameWay = obj.name
			},
			//	时间
			confirmDate(e) {
				this.valueDateArray = e
				this.valueDate = e[0] + '-' + e[e.length - 1]
				this.showDate = false
			},

			switchUnit(value, type) {
				if(this.cargoDamageType == 1){
					this.active = 1
					return false
				}
				if(type == 1){
					this.active = value
					this.active1 = ''
				}else{
					this.active1 = value
				}
				
			},

			goAddress() {
				if (!this.valueProject) {
					uni.$u.toast('请先选择项目哟～')
					return
				}
				uni.navigateTo({
					url: `./address?id=${this.valueProject}`
				})
			},
			back() {
				uni.navigateBack()
			},
			isShowDamage(){
				if(!this.nameProject || (this.isCargoDamage == 0) ){
					this.showDamageRate = false
					return false
				}
				this.getCargoDamage(this.cargoDamageType)
				this.showDamageRate = !this.showDamageRate
				if(this.showDamageRate){
					
				}
			},
			selectDamageRate(item){
				this.cargoDamageRate = item.schemeName + ':'+ item.briefIntroduction
				this.cargoDamageListId = item.cargoDamageListId
				this.showDamageRate = false
			},
			...mapMutations(['SELECTADDRESS'])
		}
	}
</script>

<style lang="scss">
	page {
		background: #FAFAFA;
	}

	.popup-wrap {
		padding: 32rpx;
		.popup-line{
			max-height: 50vh;
			box-sizing: border-box;
			overflow: auto;
			margin: 12rpx 0;
		}
		.line-item{
			padding: 24rpx 0;
			border-bottom: 1rpx solid #F5F7FB;
			display: flex;
			justify-content: space-between;
			align-items: center;
			&:last-child{
				border-bottom: none;
			}
			.line-info{
				flex: 1;
				.item {
					font-size: 30rpx;
					font-weight: 500;
					color: #333333;
					.gray{
						color: #9E9E9E;
						font-size: 22rpx;
						padding-left: 54rpx;
						margin-bottom: 12rpx;
					}
					.info {
						display: flex;
						align-items: center;
				
						.icon {
							font-size: 20rpx;
							padding: 7rpx 11rpx;
							border-radius: 12rpx;
							margin-right: 12rpx;
							color: #fff;
				
							&.start {
								background: #000;
							}
				
							&.end {
								background: #8c0a0c;
							}
						}
					}
				
					.area {
						padding-left: 54rpx;
						margin-top: 12rpx;
					}
				
					&:last-child {
						border-bottom: none;
						padding-bottom: 0;
						margin-top: 32rpx;
					}
				}
			}
			.line-edit{
				font-size: 26rpx;
				font-weight: 500;
				color: #333333;
				padding: 10rpx 16rpx;
				border-radius: 8rpx;
				border: 1rpx solid #333;
				margin-left: 24rpx;
			}
		}
		.line-title{
			display: flex;
			justify-content: space-between;
			font-size: 32rpx;
			font-weight: 500;
			color: #333333;
			padding-bottom: 12rpx;
			.text{
				text-align: center;
				flex: 1;
			}
			.cancel-btn{
				font-weight: 400;
			}
			.add-btn{
				color: #00468C;
			}
		}

		.popup-empty {
			text-align: center;
			color: #c0c4cc;
			font-size: 30rpx;
			padding: 32rpx 0;
		}

		.title {
			text-align: center;
			font-size: 32rpx;
			font-weight: 500;
			color: #333333;
			margin-bottom: 24rpx;
		}

		.popup-btn {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 12rpx 0 calc(12rpx + env(safe-area-inset-bottom));

			.btn {
				font-size: 30rpx;
				font-weight: 500;
				line-height: 80rpx;
				border-radius: 12rpx;
				text-align: center;
				box-shadow: 0 0 20rpx 12rpx rgba(0, 62, 129, 0.04);
				box-sizing: border-box;
			}

			.cancel {
				color: #333333;
				width: 40%;
				background: #fff;
				border: 1rpx solid #e9e9e9;
			}

			.confirm {
				width: 55%;
				color: #FFFFFF;
				background: linear-gradient(to right, #4d83b9, #003E81);
			}
		}

		.popup-list {
			max-height: 460rpx;
			box-sizing: border-box;
			overflow: auto;
			margin: 12rpx 0;

			.item {
				border-bottom: 1rpx solid #F5F7FB;

				.u-radio {
					padding: 24rpx 0;
				}

				&:last-child {
					border-bottom: none;
				}
			}
		}
	}

	.footer {
		position: absolute;
		left: 0;
		bottom: calc(10rpx + env(safe-area-inset-bottom));
		box-sizing: border-box;
		width: 100%;
		padding: 0 32rpx;
		.btnBox {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.btn {
			font-size: 30rpx;
			font-weight: 500;
			line-height: 80rpx;
			border-radius: 12rpx;
			text-align: center;
			box-shadow: 0 0 20rpx 12rpx rgba(0, 62, 129, 0.04);
			box-sizing: border-box;
		}

		.cache {
			color: #333333;
			width: 30%;
			background: #fff;
			border: 1rpx solid #979797;
		}

		.submit {
			width: 65%;
			color: #FFFFFF;
			background: linear-gradient(to right, #4d83b9, #003E81);
		}
	}

	.header {
		margin-top: 32rpx;
		padding: 12rpx 32rpx;
		background: #fff;
		border-radius: 8rpx;
		position: relative;
		box-sizing: border-box;

		.selected {

			.item {
				border-bottom: 1rpx solid #F5F7FB;
				font-size: 30rpx;
				font-weight: 500;
				color: #333333;
				padding-bottom: 32rpx;
				.gray{
					color: #9E9E9E;
					font-size: 22rpx;
					padding-left: 54rpx;
					margin-bottom: 12rpx;
				}
				.info {
					display: flex;
					align-items: center;

					.icon {
						font-size: 20rpx;
						padding: 7rpx 11rpx;
						border-radius: 12rpx;
						margin-right: 12rpx;
						color: #fff;

						&.start {
							background: #000;
						}

						&.end {
							background: #8c0a0c;
						}
					}
				}

				.area {
					padding-left: 54rpx;
					margin-top: 12rpx;
				}

				&:last-child {
					border-bottom: none;
					padding-bottom: 0;
					margin-top: 32rpx;
				}
			}
		}

		.unselected {
			width: 100%;
			box-sizing: border-box;
			font-weight: 500;
			color: #333;
			font-size: 24rpx;
			.line{
				margin: 0;
				width: 100%;
				transform: scaleY(0.5);
				border: 1rpx solid #F5F7FB;
				margin-top: 0;
			}
			.item {
				box-sizing: border-box;
				padding: 24rpx 0;
				.info{
					display: flex;
					align-items: center;
				}
			}
			.icon {
				font-size: 20rpx;
				padding: 7rpx 11rpx;
				border-radius: 12rpx;
				margin-right: 12rpx;
				color: #fff;
			
				&.start {
					background: #000;
				}
			
				&.end {
					background: #8c0a0c;
				}
			}
		}
	}
	.tips {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 24rpx;
		font-weight: 500;
		color: #003E81;
		padding: 18rpx 4rpx;
	}
	.content {
		padding: 0 32rpx;
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		overflow: auto;
	}
	.nav-wrap {
		position: absolute;
		width: 100vw;
		top: 0;
		left: 0;
		box-sizing: border-box;
		padding: 100rpx 24rpx 16rpx;
		background: #fff;
	
		.nav {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	
		.text {
			font-size: 30rpx;
			font-weight: 500;
			color: #333333;
		}
	
		.add {
			font-size: 28rpx;
			font-weight: 500;
			color: #333333;
			margin-right: 24rpx;
			
		}
	}
	.wrap {
		width: 100vw;
		height: 100vh;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		box-sizing: border-box;
		padding: 178rpx 0 calc(100rpx + env(safe-area-inset-bottom));
		.body{
			margin-bottom: 20rpx;
		}
	}
	.list {
		padding: 0 32rpx;
		background: #fff;
		margin-top: 32rpx;
		border-radius: 8rpx;
		.box {
			// position: relative;
			
			.unit {
				// position: absolute;
				z-index: 1000;
				top: 15px;
				right: 0;
				font-size: 24rpx;
				font-weight: 400;
				color: #888888;
				text {
					background: #E8E8E8;
					border-radius: 4rpx;
					padding: 6rpx 10rpx;
					margin-left: 8rpx;

					&.active {
						background: #F0F7FF;
						color: #003E81;
					}
				}
			}
			.unit1{
				top: 15rpx;
			}
		}

		.u-input {
			padding: 8rpx 0 !important;
		}

		.add {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 26rpx 0;
			font-size: 22rpx;
			font-weight: 500;
			color: #333333;
		}
		
	}
	.select{
		position: relative;
		display: flex;
		width: 100%;
		.unit{
			margin-top: 10rpx;
			margin-left: 8rpx;
		}
		.optionBox{
			bottom: 84rpx;
			width: 70%;
			position: absolute;
			z-index: 100000;
			border: 2rpx solid #ededed;
			border-radius: 4rpx;
			background: #fcfcfc;
			max-height: 260rpx;
			overflow-y: auto;
			.option{
				box-sizing: border-box;
				width: 100%;
				border-bottom: 1rpx solid #e7e7e7;
				padding: 6rpx 8rpx;
				color: #9c9c9c;
			}
			.option:last-child{
				border-bottom: none;
			}
			
		}
		.onlySelect{
			color: rgb(109, 111, 116);
			width: 85%;
		}
		.isColoe{
			color: #303133;
		}
	}
	.inputBox{
		display: flex;
		border: 1rpx solid #e7e7e7;;
		text{
			padding-top: 20rpx;
			color: #303133;
			padding-right: 20rpx;
		}
	}
</style>
